<template>
  <view class="container">
    <view class="top" style="color: #fff">{{ woodenFishTouchend }}</view>
    <view class="wooden_fish">
      <view :class="fontClass">上岸+1</view>
      <image
        :class="woodenFishTouchend ? 'w1' : 'w2'"
        src="../../static/image/unpack/woodenfish.png"
        mode="scaleToFill"
        @touchstart="woodenFishTouchstart"
        @touchend="woodenFishHandle"
      />
    </view>
  </view>
</template>

<script setup lang="ts">
import { debounce } from 'lodash-es'
import { ref } from 'vue'

const woodenFishTouchend = ref(false)

const fontClass = ref('default')

const woodenFishTouchstart = () => {
  // woodenFishTouchend.value = true
}
const woodenFishHandle = debounce(() => {
  const innerAudioContext = uni.createInnerAudioContext()
  innerAudioContext.autoplay = true
  innerAudioContext.src = '/static/video/wooden_fish_video.mp3'
  innerAudioContext.onPlay(() => {
    fontClass.value = 'font'
    woodenFishTouchend.value = false
    setTimeout(() => {
      woodenFishTouchend.value = true
    }, 100)

    setTimeout(() => {
      fontClass.value = 'default'
    }, 500)
  })
}, 100)
</script>
<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100vh;
  background-color: #000;

  .top {
    width: 100%;
    height: 40%;
  }

  .wooden_fish {
    width: 100%;
    height: 60%;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    overflow: visible;

    > image {
      transition: all 0.1s;
    }

    .w1 {
      transform: scale(1);
    }
    .w2 {
      transform: scale(1.1);
    }

    .default {
      position: absolute;
      color: #fff;
      opacity: 0;
      font-weight: 700;
    }

    .font {
      position: absolute;
      color: #fff;
      opacity: 0;
      animation: mymove 1s;
      font-weight: 700;
    }

    @keyframes mymove {
      from {
        top: 0;
        opacity: 100;
      }
      to {
        top: -100rpx;
        opacity: 0;
      }
    }
  }
}
</style>
